<template>
  <div class="ies-dialog" ref="iesDialog" v-if="visible">
    <el-dialog
      v-bind="$attrs"
      :width="$attrs.width?$attrs.width:'1100px'"
      right
      :append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="visible"
      :custom-class="$attrs['custom-class']?($attrs.buttonShow?'ies-dialog '+$attrs['custom-class']:$attrs['custom-class']):''"
      @close="$emit('update:iesDialogFlag' , false)"
      @open="open"
      @opened="opened"
      @closed="closed"
    >
      <div :style="{height:height}">
        <vue-scroll
          v-if="(typeof $attrs.scrollPanel!=='undefined')&&$attrs.scrollPanel==true||(typeof $attrs.scrollPanel==='undefined')"
          :ops="scrollPanel"
        >
          <slot />
        </vue-scroll>
        <slot v-else />
      </div>
      <div
        slot="footer"
        class="dialog-footer"
        :data-sh="$attrs.buttonShow"
        v-if="(typeof $attrs.buttonShow!=='undefined')&&$attrs.buttonShow==true||(typeof $attrs.buttonShow==='undefined')"
      >
        <el-button v-if="cancelShow" @click="cancel">{{cancelDefaultText}}</el-button>
        <el-button v-if="affirmShow" type="primary" @click="affirm">{{affirmDefaultText}}</el-button>
      </div>
      <div v-else-if="footerState" slot="footer" class="dialog-footer">
        <slot name="footer" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { vueScrollSetting } from '@config/vue-scroll-setting'
export default {
  props: {
    height: {
      type: String,
      default: '550px'
    },
    iesDialogFlag: {
      default: false
    },
    cancelShow: {
      type: Boolean,
      default: true
    },
    affirmShow: {
      type: Boolean,
      default: true
    },
    footerState: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: String
    },
    affirmText: {
      type: String
    }
  },
  data () {
    return {
      scrollPanel: vueScrollSetting,
      visible: this.iesDialogFlag
    }
  },
  watch: {
    iesDialogFlag () {
      this.visible = this.iesDialogFlag
      if (!this.visible) {
        this.$emit('closed')
      }
    }
  },
  computed: {
    cancelDefaultText () {
      if (this.cancelText) {
        return this.cancelText
      } else {
        return this.$t('button.cancel')
      }
    },
    affirmDefaultText () {
      if (this.affirmText) {
        return this.affirmText
      } else {
        return this.$t('button.affirm')
      }
    }
  },
  created () {

  },
  methods: {
    closed () {
      this.$emit('closed')
    },
    open () {
      this.$emit('open')
    },
    opened () {
      this.$emit('opened')
    },
    cancel () {
      this.$emit('cancel')
    },
    affirm () {
      this.$emit('affirm')
    }
  }
}
</script>

<style lang="scss">
.el-dialog__wrapper {
  .el-dialog {
    border-radius: 10px !important;
    .el-dialog__header {
      border-bottom: 1px solid #ddd !important;
    }
    .el-dialog__body {
      padding-bottom: 10px;
      &/deep/ .__vuescroll {
        &/deep/ .__panel {
          &/deep/ .__view {
            min-height: 93% !important;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.el-dialog__wrapper {
  &/deep/ div[role='dialog'].el-dialog {
    border-radius: 10px !important;
  }
}
</style>
